<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Serendipity</title>
<link rel="shortcut icon" href="style/images/favicon.png"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/css/view.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/type/marketdeco.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/type/merriweather.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/css/queries.css" media="all" />
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="style/css/ie9.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/html5.js"></script>
<script type="text/javascript" src="style/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="style/js/selectnav.js"></script>
<script type="text/javascript" src="style/js/twitter.min.js"></script>
</head>

<body class="singular page">
<div id="page" class="hfeed">
<div id="wrapper">
<header id="branding" role="banner">
  <h1 id="site-title"> 
  	<a href="index.html" title="Serendipity" rel="home">
    		<img src="style/images/logo.png" alt="Serendipity" />
    </a> 
  </h1>
  <div class="social">
    <div class="widget_search">
      <form method="get" class="search-form">
        <input type="submit" value="Search" class="search-submit-button" />
        <input type="text" value="Search" onfocus="this.value=''" onblur="this.value='Search'" name="s" class="search-text-box" />
      </form> 
    </div>
    <ul>
      <li><a href="#" target="_blank"><img src="style/images/icon-rss.png" alt="RSS" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-facebook.png" alt="Facebook" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-twitter.png" alt="Twitter" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-dribbble.png" alt="Dribbble" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-linkedin.png" alt="LinkedIn" /></a></li>
      <li><a href="#" target="_blank"><img src="style/images/icon-pinterest.png" alt="Pinterest" /></a></li>
    </ul>
  </div>
  <nav id="access" class="access" role="navigation">
        <div id="menu" class="menu">
        	<ul id="tiny">
				<li><a href="index.html">Blog</a>
					<ul>
			            <li><a href="post.html">Blog Post</a></li>
			        </ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="misc.html">Styles</a>
					<ul>
			            <li><a href="misc.html">Misc</a></li>
			            <li><a href="columns.html">Columns</a></li>
			            <li><a href="typography.html">Typography</a></li>
			        </ul>
				</li>
				<li><a href="about.html">About</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</div>
		<div class="triangle-l"></div>
		<div class="triangle-r"></div>
  </nav>
  <!-- #access --> 
</header>
<!-- #branding -->

<div id="main">

<div id="primary">
  <div id="content" role="main">
  
  <div id="crumbs">
  	<a href="#">Home</a> <span class="delimiter">/</span> 
  	<span class="current">Columns</span>
  </div>
				

  <!-- begin article -->
  <article class="page hentry">
  	<header class="entry-header">
		<h1 class="entry-title"><a href="#">Columns</a></h1>
    </header>
    <!-- .entry-header -->
    
    <div class="entry-content">
    
    	<div class="one-half">
          <p><span class="dropcap">A</span>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci. Curabitur lacus nisi, vestibulum id aliquam sit amet, dictum sit amet lacus. </p>
        </div>
        <div class="one-half last">
          <p><span class="dropcap">B</span>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci. Curabitur lacus nisi, vestibulum id aliquam sit amet, dictum sit amet lacus. </p>
        </div>
        <div class="clear"></div>
        <div class="one-third">
          <p><span class="dropcap">C</span>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci. Curabitur lacus nisi, vestibulum id aliquam sit amet, dictum sit. </p>
        </div>
        <div class="one-third">
          <p><span class="dropcap">D</span>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci. Curabitur lacus nisi, vestibulum id aliquam sit amet, dictum sit. </p>
        </div>
        <div class="one-third last">
          <p><span class="dropcap">E</span>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci. Curabitur lacus nisi, vestibulum id aliquam sit amet, dictum sit. </p>
        </div>
        <div class="clear"></div>
        <br />
        <h2>Heading 2</h2>
        <div class="one-fourth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci.</p>
        </div>
        <div class="one-fourth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci.</p>
        </div>
        <div class="one-fourth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci.</p>
        </div>
        <div class="one-fourth last">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci.</p>
        </div>
        <div class="clear"></div>
        <br />
        <h3>Heading 3</h3>
        <div class="one-fifth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. </p>
        </div>
        <div class="one-fifth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. </p>
        </div>
        <div class="one-fifth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. </p>
        </div>
        <div class="one-fifth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus.</p>
        </div>
        <div class="one-fifth last">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus.</p>
        </div>
        <div class="clear"></div>
        <br />
        <h4>Heading 4</h4>
        <div class="one-sixth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus. </p>
        </div>
        <div class="one-sixth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus. </p>
        </div>
        <div class="one-sixth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus. </p>
        </div>
        <div class="one-sixth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus.</p>
        </div>
        <div class="one-sixth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus.</p>
        </div>
        <div class="one-sixth last">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus.</p>
        </div>
        <div class="clear"></div>
        <br />
        <h5>Heading 5</h5>
        <div class="two-third">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci. Curabitur lacus nisi, vestibulum id aliquam sit amet, dictum sit amet lacus. </p>
        </div>
        <div class="one-third last">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas. </p>
        </div>
        <div class="clear"></div>
        <br />
        <h6>Heading 6</h6>
        <div class="one-fourth">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue. </p>
        </div>
        <div class="three-fourth last">
          <p>Nam laoreet rutrum ligula, at tincidunt ligula sagittis semper. Integer congue vehicula lectus eu faucibus. Maecenas ante lectus, placerat et venenatis quis, dictum quis orci. Curabitur lacus nisi, vestibulum id aliquam sit amet, dictum sit amet lacus. </p>
        </div>
        <div class="clear"></div>

 	</div>
    <!-- .entry-content -->
    
  </article>
  <!-- end article -->
  

  
  </div><!-- #content -->
</div><!-- #primary -->


</div><!-- #main -->

	<footer id="colophon" role="contentinfo">
		<div id="supplementary" class="four">
			<div id="first" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">Search</h5>	
					<form method="get" id="searchform" action="http://themes.iki-bir.com/serendipity-wp/">
						<input type="text" class="field" name="s" id="s" title="Search" placeholder="" />
						<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
					</form>
				</aside>
				
				<aside class="widget">
					<h5 class="widget-title">Recent Posts</h5>		
						<ul>
							<li><a href="#" title="A Wonderful Serenity">A Wonderful Serenity</a></li>
							<li><a href="#" title="The Meridian Sun">The Meridian Sun</a></li>
							<li><a href="#" title="Gallery Format">Gallery Format</a></li>
							<li><a href="#" title="Gregor Samsa">Gregor Samsa</a></li>
							<li><a href="#" title="A Life In The Day">A Life In The Day</a></li>
						</ul>
				</aside>
			</div><!-- #first .widget-area -->
	
			<div id="second" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">Twitter</h5>
					<div id="twitter-wrapper">
						<div id="twitter"></div>
						<span class="username"><a href="http://twitter.com/elemisdesign">→ Follow @elemisdesign</a></span>
					</div>
				</aside>	
			</div><!-- #second .widget-area -->
	
			<div id="third" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">Tags</h5>
						<div class="tagcloud"><a href='#' class='tag-link-37' title='1 topic' style='font-size: 8pt;'>blogroll</a>
						<a href='#' class='tag-link-33' title='4 topics' style='font-size: 19.666666666667pt;'>daily</a>
						<a href='#' class='tag-link-32' title='1 topic' style='font-size: 8pt;'>dialog</a>
						<a href='#' class='tag-link-28' title='1 topic' style='font-size: 8pt;'>gallery</a>
						<a href='#' class='tag-link-27' title='1 topic' style='font-size: 8pt;'>journal</a>
						<a href='#' class='tag-link-36' title='1 topic' style='font-size: 8pt;'>link</a>
						<a href='#' class='tag-link-31' title='1 topic' style='font-size: 8pt;'>motion</a>
						<a href='#' class='tag-link-38' title='1 topic' style='font-size: 8pt;'>music</a>
						<a href='#' class='tag-link-25' title='5 topics' style='font-size: 22pt;'>photo</a>
						<a href='#' class='tag-link-26' title='2 topics' style='font-size: 13.25pt;'>professional</a>
						<a href='#' class='tag-link-29' title='1 topic' style='font-size: 8pt;'>quotation</a>
						<a href='#' class='tag-link-34' title='1 topic' style='font-size: 8pt;'>show</a>
						<a href='#' class='tag-link-39' title='1 topic' style='font-size: 8pt;'>sound</a>
						<a href='#' class='tag-link-35' title='1 topic' style='font-size: 8pt;'>tv</a>
						<a href='#' class='tag-link-30' title='1 topic' style='font-size: 8pt;'>video</a></div>
				</aside>
				
				<aside class="widget">
					<h5 class="widget-title">Archives</h5>
						<ul>
							<li><a href='#' title='May 2012'>May 2012</a></li>
							<li><a href='#' title='April 2012'>April 2012</a></li>
						</ul>
				</aside>
			</div><!-- #third .widget-area -->
		
			<div id="fourth" class="widget-area" role="complementary">
				<aside class="widget">
					<h5 class="widget-title">About</h5>			
					<div class="textwidget"><p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. </p>
						<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
					</div>
				</aside>
			</div><!-- #third .widget-area -->
		</div><!-- #supplementary -->
		<div id="site-generator">
			Copyright 2012 - Serendipity
		</div>

	</footer><!-- #colophon -->
	</div><!-- #wrapper -->
</div><!-- #page -->

<script type="text/javascript" src="style/js/scripts.js"></script>
</body>
</html>